<template>
    <section class="container">
      <div v-if="loaded">
        <!-- 面包屑导航条 -->
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/hotel' }">{{ hotel.real_city }}酒店</el-breadcrumb-item>
            <el-breadcrumb-item>{{ hotel.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
  
        <!-- 名称信息 -->
        <el-row class="name-info">
          <el-col>
            <el-row>
              <h4 class="hotel-cn-name">
                {{ hotel.name }}
                <starBudget :value="hotel.hotellevel" />
              </h4>
            </el-row>
            <el-row>
              <span class="hotel-en-name">{{ hotel.alias }}</span>
            </el-row>
            <el-row><i class="iconfont iconlocation" />{{ hotel.address }}</el-row>
          </el-col>
        </el-row>
  
        <!-- 图片信息 -->
        <el-row class="pic-info info-row">
          <photoView :dataSource="photoList" summary="" />
        </el-row>
  
        <!-- 价格信息 -->
        <el-table :data="hotel.products" style="width: 100%" class="info-row" @row-click="onPriceRowClick"
          :row-style="{ cursor: 'pointer' }">
          <el-table-column prop="name" label="价格来源" />
          <el-table-column label="低价房型" prop="bestType" />
          <el-table-column label="最低价格/每晚" width="160">
            <template slot-scope="scope">
              <span class="height-light larger">
                ￥{{ scope.row.price }}
              </span>起
              <span>
                <i class="el-icon-arrow-right height-light" />
              </span>
            </template>
          </el-table-column>
        </el-table>
  
        <div class="info-row">
          <detailMap :dataSource="hotel" width="600px" height="400px" />
        </div>
  
        <div class="info-row">
          <el-row class="assets-info">
            <el-col :span="4" class="assets-info-hd">基本信息</el-col>
            <el-col :span="20" class="assets-info-bd">
              <el-row type="flex" :gutter="10" class="base-info">
                <el-col>入住时间: 14:00之后</el-col>
                <el-col>离店时间: 12:00之前</el-col>
                <el-col>{{ hotel.creation_time }} / {{ hotel.renovat_time }}</el-col>
                <el-col>酒店规模: {{ hotel.roomCount }}间客房</el-col>
              </el-row>
            </el-col>
          </el-row>
  
          <el-row class="assets-info">
            <el-col :span="4" class="assets-info-hd">主要设施</el-col>
            <el-col :span="20" class="assets-info-bd">
              <span v-for="a in hotel.hotelassets" :key="a.name" type="info" class="assets-info-item">{{ a.name }}</span>
            </el-col>
          </el-row>
  
          <el-row class="assets-info">
            <el-col :span="4" class="assets-info-hd">停车服务</el-col>
            <el-col :span="20" class="assets-info-bd base-info">
              {{ hotel.parking || '-' }}
            </el-col>
          </el-row>
  
          <el-row class="assets-info">
            <el-col :span="4" class="assets-info-hd">品牌信息</el-col>
            <el-col :span="20" class="assets-info-bd">
              {{ hotel.hotelbrand ? hotel.hotelbrand.name : '-' }}
            </el-col>
          </el-row>
        </div>
  
        <div class="comment-row">
          <h4 class="comments-hd">{{ comments.total }}条真实用户评论</h4>
  
          <el-row type="flex" class="scores-row">
            <el-col :span="4">
              <p>总评数：{{ hotel.all_remarks }}</p>
              <p>好评数：{{ hotel.good_remarks }}</p>
              <p>差评数：{{ hotel.bad_remarks }}</p>
            </el-col>
            <el-col class="recomment-score" :span="5">
              <div class="comment-star">
                <rateBudget :value="hotel.stars" />
              </div>
              <div class="x-large height-light stamp">{{ recomment }}</div>
            </el-col>
            <el-col v-for="s in scores" :span="3" :key="s.value">
              <div class="rate-box">
                <circleRate :radius="35" :value="s.value" :label="s.name" />
              </div>
            </el-col>
          </el-row>
  
          <div class="comment-list">
            <commentsView :userInfo="userInfo" :hotel="hotel" :dataSource="comments.data" />
          </div>
        </div>
  
      </div>
  
      <div v-else class="empty-page">
        <img src="/images/loading.gif" alt="">
      </div>
    </section>
  </template>
  
  <script>
  import photoView from '@/components/hotel/detail/photos'
  import detailMap from '@/components/hotel/detail/map'
  import starBudget from '@/components/hotel/starBudget'
  import rateBudget from '@/components/hotel/rateBudget'
  import circleRate from '@/components/hotel/circleRate'
  import commentsView from '@/components/hotel/detail/comments'
  import nuxtConfig from '@/nuxt.config'
  
  export default {
    data() {
      return {
        loaded: false,
        userInfo: null,
        hotel: {},
        comments: {},
        baseURL: nuxtConfig.axios.baseURL
      }
    },
  
    mounted() {
      const { params: { id } } = this.$route
        
      this.$axios({
        url: '/hotels',
        params: { id }
      }).then(r => {
        const { data: { data: [data] } } = r
        this.hotel = data
        this.loaded = true
      })
  
      // 获取评论列表
      this.$axios({
        url: '/hotels/comments',
        // params: {id} // 数据不支持
      }).then(r => {
        this.comments = r.data
      })
    },
  
    computed: {
      scores() {
        const { environment, product, service } = this.hotel.scores
        return {
          environment: { name: '环境', value: environment },
          product: { name: '产品', value: product },
          service: { name: '服务', value: service },
        }
      },
  
      photoList() {
        return [...new Array(6)].map((_, i) => {
          return {
            name: this.hotel.name,
            value: `/images/hotel-pics/${i + 1}.jpeg`
          }
        })
      },
  
      recomment() {
        const { hotel: { stars } } = this
        let r = '一般'
        if (stars > 4) {
          r = '非常推荐'
        } else if (stars > 3) {
          r = '推荐'
        }
        return r
      }
    },
  
    methods: {
      onPriceRowClick() {
        window.open('https://hotels.ctrip.com/hotel/694679.html', '_blank')
      }
    },
  
    components: {
      detailMap,
      starBudget,
      rateBudget,
      photoView,
      circleRate,
      commentsView,
    }
  }
  </script>
  
  <style scoped lang="less">
  .container {
    width: 1000px;
    margin: 0 auto;
  
    .height-light {
      color: #f90;
    }
  
    .larger {
      font-size: larger;
    }
  
    .x-large {
      font-size: x-large;
    }
  
    .breadcrumb {
      overflow: hidden;
      padding: 20px 0;
    }
  
    .name-info {
      margin-bottom: 20px;
      color: #666;
      font-size: 14px;
    }
  
    .hotel-cn-name {
      color: #333;
      font-weight: normal;
      font-size: x-large;
    }
  
    .hotel-en-name {
      margin-bottom: 0.5em;
    }
  
    .box-card {
      margin: 20px 0;
    }
  
    .scores-row {
      color: #666;
      padding: 20px 0;
    }
  
    .score-item {
      margin-top: 6px;
    }
  
    .base-info {
      color: #666;
      font-size: 14px;
    }
  
    .assets-info {
      border-bottom: 1px solid #eee;
  
      .assets-info-hd,
      .assets-info-bd {
        padding: 20px 10px;
        font-size: 14px;
      }
  
      .assets-info-item {
        border: 1px solid #eee;
        padding: 4px 10px;
        margin-right: 10px;
        border-radius: 4px;
        background-color: #eee;
        color: #666;
      }
    }
  
    .info-row {
      margin: 40px 0;
    }
  
    .empty-page {
      text-align: center;
    }
  
    .rate-box {
      width: 70px;
    }
  
    .recomment-score {
      position: relative;
      display: flex;
      align-content: center;
    }
  
    .comment-star {
      margin-top: 20px;
    }
  
    .stamp {
      position: absolute;
      left: 20px;
      border: 2px solid #fa3;
      text-align: center;
      line-height: 70px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      opacity: 0.25;
      transform: rotate(-30deg);
    }
  }
  </style>
  